<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/xqhuclass.css">
    <link rel="stylesheet"  href="css/swiper.min.css">
    <link rel="stylesheet"  href="css/fudong.css">
</head>
<body>

<div  class="head">
</div>
<div  id="hucontain">
    <div>
        <div>已选课程</div>
    <div  class="huzuixinkaiban">
        <div><img :src="wclass.src" /></div>
            <div>
                <div>{{wclass.title}}</div>
                <div><span>{{wclass.classs}}</span><span>{{wclass.banji}}</span><span>{{wclass.number}}人</span><span>提高</span></div>
                <div>￥{{wclass.money}}</div>
                <div>上课时段:  {{wclass.ddta}}</div>
                <div>上课时间:  {{wclass.sdate}}</div>
                <div>校区:  {{wclass.xiaoqu}}</div>
            </div>
    </div>

    <!--选择报名者-->
    <div  class="baoming">选择报名者</div>
     <div class="haizis">
         <div>
             <div v-for="(item,index)  in  haizs">
                 <input type="checkbox"class="Checkbox" :id="index">
                 <label :for="index"></label>
                 <img  :src="item.src" />
                 <span>{{item.name}}</span>
                 <span>{{item.sex}}</span>
                 <span>{{item.age}}</span>
             </div>
         </div>
         <div>
             <input type="checkbox"class="Checkbox" id="indexd">
             <label for="indexd"></label>
             <span>全选</span>
              <span>立即报名</span>
         </div>
     </div>

   <div class="guanggao">
       <img  :src="guanggao" />

   </div>

</div>
</div>


<div  class="dibussss"></div>
</body>
<script  src="js/jquery.3.3.1.min.js"></script>
<script src="js/swiper.min.js"></script>
<script  src="js/vue.js"></script>
<script  type="text/javascript">


    $(document).ready(function () {
        $(".head").load("xqhead.html")
        $(".dibussss").load("dibu.html")
    })

    window.onload = function() {
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay:true,

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
        });

        var mySwiper1 = new Swiper ('.swiper-container2', {
            direction: 'vertical', // 垂直切换选项
            slidesPerView : 2,   // 设置每个模块数量
            spaceBetween : 10, //设置间距
            autoplay:true,
            loop:true,
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            loop: true, // 循环模式选项
        });

    }

    new Vue({
        el:"#hucontain",
        data:{
            indextea:0,
            indexs:1,  //导航栏下标
            state:true,  //判断是否登录
            haizis:["胡杰","胡杰1"],
            webmorentou:"http://bzt.cybwnt.com/uploads/zhongxue/webmytouxiang.png",
            wclass:{src:"http://bzt.cybwnt.com/uploads/zhongxue/webzxkc.png",title:"四年级趣味英语入门精选课程",classs:"语文",banji:"2班",number:"30",money:"15000",ddta:"06月12日 - 12月30日",sdate:"周日16：00〜18：30",xiaoqu:"成都分校"},
            haizs:[{src:"http://bzt.cybwnt.com/uploads/zhongxue/webmytouxiang.png",name:"李雪",sex:"男",age:"15"},{src:"http://bzt.cybwnt.com/uploads/zhongxue/webmytouxiang.png",name:"李雪",sex:"男",age:"15"},{src:"http://bzt.cybwnt.com/uploads/zhongxue/webmytouxiang.png",name:"李雪",sex:"男",age:"15"},],
            guanggao:"http://bzt.cybwnt.com/uploads/zhongxue/webwangluojiao.png",
        },
        methods:{
            //点击导航栏
            hoverd:function ($event) {
                this.indexs=$event.target.getAttribute("index")
            },
        },



    })


</script>
</html>